<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>知识图像生成平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<h1 class="text-2xl font-bold mb-4">📤 上传训练图像</h1>
<form id="upload-form" enctype="multipart/form-data">
    <label>概念名称：<input type="text" name="concept" required></label><br><br>
    <input type="file" name="files" id="file-input" multiple required><br><br>
    <button type="submit">上传图片</button>
</form>
<h1 class="text-2xl font-bold mt-10 mb-4">🧠 概念训练</h1>
<form action="/train/" method="post">
    <input type="text" name="concept" placeholder="已有概念名" required class="border p-2 mr-2">
    <button type="submit" class="bg-green-600 text-white px-4 py-2">开始训练</button>
</form>
<h2>使用概念关键词生成图像</h2>
<form action="/generate/" method="post">
    <label>关键词:</label><br>
    <input type="text" name="concept" required><br><br>

<label>选择 LoRA（可选）:</label><br>
<select name="lora" class="border p-2">
    <option value="">不使用 LoRA</option>
    {% for concept in trained_concepts %}
        <option value="{{ concept }}">{{ concept }}</option>
    {% endfor %}
</select><br><br>

    <input type="submit" value="生成图像">
</form>
<h2 class="text-xl font-bold mt-10 mb-2">🔍 关键字检索训练图像</h2>
<form onsubmit="searchImages(event)" class="mb-4">
    <input type="text" id="searchInput" placeholder="输入概念关键词" required class="border p-2 mr-2">
    <button type="submit" class="bg-purple-600 text-white px-4 py-2">检索</button>
</form>
<div id="searchResults" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4"></div>
<h2 class="text-xl font-bold mb-2">✅ 已训练的概念</h2>
<ul class="list-disc pl-6 text-green-600">
    {% for concept in trained_concepts %}
    <li>{{ concept }}</li>
    {% endfor %}
</ul>

<h2 class="text-xl font-bold mt-4 mb-2">⚠️ 未训练的概念</h2>
<ul class="list-disc pl-6 text-red-600">
    {% for concept in untrained_concepts %}
    <li>{{ concept }}</li>
    {% endfor %}
</ul>
</body>
</html>
<script>
    document.getElementById("upload-form").addEventListener("submit", async function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const files = document.getElementById("file-input").files;
        for (const file of files) {
            formData.append("files", file);
        }
        const res = await fetch("/upload/", {
            method: "POST",
            body: formData
        });

        const result = await res.json();
        document.getElementById("upload-result").innerText = JSON.stringify(result);
    });

    async function searchImages(event) {
        event.preventDefault();
        const query = document.getElementById("searchInput").value;
        const resultDiv = document.getElementById("searchResults");
        resultDiv.innerHTML = "正在检索...";

        try {
            const res = await fetch(`/search/?q=${encodeURIComponent(query)}`);
            const data = await res.json();

            if (data.error) {
                resultDiv.innerHTML = `<p class="text-red-500">${data.error}</p>`;
                return;
            }

            resultDiv.innerHTML = data.images.map(url => `
            <div>
                <img src="${url}" class="border rounded w-full" />
            </div>
        `).join("");
        } catch (err) {
            resultDiv.innerHTML = `<p class="text-red-500">检索失败：${err.message}</p>`;
        }
    }
</script>